<template>
  <div class="middle">
    <div class="bg">
      <div class="router" v-for="(item, index) in routers" @click="routerClick(index)">
        <div class="word">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routers: [{
        name: '一人一档',
        path: 'people'
      },{
        name: '一企一档',
        path: 'enterprise'
      },{
        name: '一户一档',
        path: 'family'
      },{
        name: '一房一档',
        path: 'room'
      },{
        name: '一车一档',
        path: 'car'
      }]
    };
  },

  mounted() {},

  methods: {
    routerClick(index) {
      this.$router.replace("/main/day/"+this.routers[index].path);
      this.bus.$emit('backBus')
    }
  },
};
</script>

<style lang="scss" scoped>
.middle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 123;
  .bg {
    width: 20rem;
    height: 16.375rem;
    background: url(~assets/img/day/04-9.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
  }
  .router {
    position: absolute;
    background: url(~assets/img/day/aBg.png) no-repeat;
    background-size: 100% auto;
    width: 8.625rem;
    height: 9.875rem;
    cursor: pointer;
    .word {
      position: absolute;
      left: 0.5625rem;
      top: -3.125rem;
      font-size: 1.625rem;
      font-family: "hzgb";
      color: rgb(0, 228, 255);
      width: 7.5rem;
      line-height: 3.125rem;
      text-align: center;
      background: url(~assets/img/day/04-11.png) no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .router:nth-child(1) {
    left: -12.5rem;
    top: 3.125rem;
  }
  .router:nth-child(2) {
    left: -6.25rem;
    bottom: -6.25rem;
  }
  .router:nth-child(3) {
    left: 50%;
    bottom: -12.5rem;
    margin-left: -3.75rem;
  }
  .router:nth-child(4) {
    right: -6.25rem;
    bottom: -6.25rem;
  }
  .router:nth-child(5) {
    right: -12.5rem;
    top: 3.125rem;
  }
}
</style>